<script setup>
import * as echarts from 'echarts'
import apiBigscreen from "@/api/bigscreen.js"
import {onMounted, ref} from "vue";

const refEcharts = ref()
const chart = ref()
const data = ref([])

onMounted(async () => {
  data.value = await apiBigscreen.getMap()
  echarts.registerMap('china', data.value)
  chart.value = echarts.init(refEcharts.value)
  chart.value.setOption({
    // 标题
    title: {
      text: "城市销量统计",
      left: "center",
      top: "3%",
      textStyle: {
        color: "#fff",
        fontSize: 20,
        textShadowBlur: 10,
        textShadowColor: "#33ffff",
      }
    },
    // 视觉映射效果，不同的值有不同的颜色
    visualMap: {
      type: "continuous",
      min: 0,
      max: 5000,
      calculable: true,
      inRange: {
        color: ["#50a3ba", "#eac736", "#d94e5d"],
      },
      textStyle: {
        color: "#fff",
      }
    },
    geo: {
      map: 'china',
      itemStyle: {
        areaColor: "#0099ff",
        borderColor: "#00ffff",
        shadowColor: "rgba(230,130,70,0.5)",
        shadowBlur: 30,
      }
    },
    // 地图上的城市散点
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        itemStyle: {
          color: 'red',
        },
        data: [
          {name: "北京", value: [116.46, 39.92, 4367]},
          {name: "上海", value: [121.48, 31.22, 8675]},
          {name: "深圳", value: [114.07, 22.62, 2461]},
          {name: "广州", value: [113.23, 23.16, 187]},
          {name: "西安", value: [108.45, 34, 3421]},
        ],
      }
    ]
  })
})
</script>

<template>
  <div class="chart" ref="refEcharts"></div>
</template>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>